import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';
import './styles/main.scss';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="container mx-auto p-4">
      <header className="flex justify-between items-center mb-6">
        <div className="flex gap-4">
          <a href="https://vite.dev" target="_blank" className="hover:scale-110 transition-all">
            <img src={viteLogo} className="w-30px" alt="Vite logo" />
          </a>
          <a href="https://react.dev" target="_blank" className="hover:scale-110 transition-all">
            <img src={reactLogo} className="w-30px animate-spin-slow" alt="React logo" />
          </a>
        </div>
        <h2 className="text-gray-600 text-sm">React + TS + Vite + UnoCSS + Sass</h2>
      </header>

      <main className="text-center">
        <h1 className="text-3xl font-bold mb-6 bg-gradient-to-r from-blue-500 to-teal-400 bg-clip-text text-transparent">
          Vite + React
        </h1>

        <div className="mb-8 p-6 bg-gray-100 rounded-lg shadow-sm">
          <button onClick={() => setCount(count => count + 1)} className="btn-primary mb-4">
            计数器：{count}
          </button>

          <p className="text-gray-700">
            编辑 <code className="bg-gray-200 px-1 rounded">src/App.tsx</code> 并保存以测试热更新
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
          <div className="border border-gray-200 rounded-lg p-4">
            <h3 className="text-xl font-bold mb-2 text-blue-600">UnoCSS 示例</h3>
            <div className="flex flex-wrap gap-2 justify-center">
              <button className="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded">
                按钮
              </button>
              <button className="bg-green-500 hover:bg-green-700 text-white py-2 px-4 rounded">
                按钮
              </button>
              <button className="bg-red-500 hover:bg-red-700 text-white py-2 px-4 rounded">
                按钮
              </button>
            </div>
          </div>

          <div className="border border-gray-200 rounded-lg p-4">
            <h3 className="text-xl font-bold mb-2 text-green-600">Sass 示例</h3>
            <div className="flex flex-wrap gap-2 justify-center">
              <button className="sass-btn primary">主要按钮</button>
              <button className="sass-btn secondary">次要按钮</button>
            </div>
          </div>
        </div>
      </main>

      <footer className="text-center text-gray-500 text-sm mt-8">
        点击 Vite 和 React 图标了解更多
      </footer>
    </div>
  );
}

export default App;
